<template>
  <div class="pagebox">
    <div class="app-container">
      <a-row :gutter="10">
        <!--      任务列表-->
        <a-col :span="7">
          <div class="topFiltrate">
            <p :class="dateType == -1 ? 'activep' : ''" @click="changedate(-1)">全部</p>
            <p :class="dateType == 0 ? 'activep' : ''" @click="changedate(0)">未开始</p>
            <p :class="dateType == 1 ? 'activep' : ''" @click="changedate(1)">进行中</p>
            <p :class="dateType == 2 ? 'activep' : ''" @click="changedate(2)">已完成</p>
          </div>
          <div class="bg" style="padding: 20px 10px;min-height:80vh">
            <ul v-if="taskList.length > 0">
              <li
                class="taskli"
                :class="taskLIiIndex == index ? 'activeli' : ''"
                v-for="(item, index) in taskList"
                :key="index"
                @click="choseTask(index)"
              >
                <div class="tasktop">
                  <span class="tasktopname">{{ item.taskName }}</span>
                  <span class="tasktopstatus">
                    {{ item.status == 1 ? '进行中' : item.status == 2 ? '完成' : '未开始' }}
                  </span>
                </div>
                <div class="taskPRO">
                  <div class="progress">
                    <span class="progressnum">{{ item.planCount }}</span>
                    <!--  计划数量-->
                    <div
                      class="progressPlan"
                      :style="{ width: ((item.nowPlanCount / item.planCount) * 100).toFixed(2) + '%' }"
                    >
                      <span class="progressPlannum">{{ item.nowPlanCount }}</span>
                    </div>
                    <!-- 完成数量-->
                    <div
                      class="progressIn"
                      :style="{
                        width: ((item.nowActualCount / item.planCount) * 100).toFixed(2) + '%',
                        background: item.nowPlanCount > item.nowActualCount ? '#D65B4A' : '#66B92E',
                      }"
                    >
                      <span
                        class="progressInnum"
                        :style="{ color: item.nowPlanCount > item.nowActualCount ? '#D65B4A' : '#66B92E' }"
                      >
                        {{ item.nowActualCount }}
                      </span>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="taskMsg">
                    <div>
                      <h4>{{ item.customerName }}</h4>
                      <p>客户名称</p>
                    </div>
                    <div>
                      <h4>{{ item.productName }}</h4>
                      <p>工件名称</p>
                    </div>
                    <div>
                      <h4>{{ item.endTime }}</h4>
                      <p>任务结束时间</p>
                    </div>
                  </div>
                  <div style="text-align: center" v-if="item.status == 1">
                    <a-popconfirm
                      title="确认结束本次任务？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="finishTask(item, index)"
                    >
                      <a-button type="danger">结束</a-button>
                    </a-popconfirm>
                  </div>
                </div>
              </li>
            </ul>
            <a-empty v-else style="margin-top:30vh" />
          </div>
        </a-col>
        <a-col :span="17">
          <a-row :gutter="10">
            <a-col :span="24">
              <div class="bg" style="width: 100%;overflow:hidden;">
                <div class="pieChartbox">
                  <div class="pieChartname">
                    详情
                  </div>
                  <pie-charts
                    v-if="pieData.length > 0"
                    :nowTask="nowTask"
                    :chartData="pieData"
                    :percent="pieDataPercent"
                  ></pie-charts>
                </div>
                <div class="pieChartnum">
                  <div>
                    <h4 class="colorin">{{ nowTask.pickCount || 0 }}</h4>
                    <p>领料数(个)</p>
                  </div>
                  <div>
                    <h4 style="color: #66B92E">{{ nowTask.produceCount - nowTask.wasterCount || 0 }}</h4>
                    <p>产出</p>
                  </div>
                  <div style="border-bottom:0">
                    <h4 style="color:#FF3535">{{ nowTask.wasterCount || 0 }}</h4>
                    <p>废件</p>
                  </div>
                </div>
                <div class="taskdMSG">
                  <div class="taskd_title">
                    订单信息
                  </div>
                  <a-row>
                    <a-form :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
                      <a-col :span="12">
                        <a-form-item label="订单名称">{{ nowTask.taskName || '暂无数据' }}</a-form-item>
                        <a-form-item label="客户名称">{{ nowTask.customerName || '暂无数据' }}</a-form-item>
                        <a-form-item label="销售单号">{{ nowTask.saleNumber || '暂无数据' }}</a-form-item>
                        <a-form-item label="毛坯总库存">{{ nowTask.stockNumber || '暂无数据' }}</a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item label="工件编号">{{ nowTask.productNumber || '暂无数据' }}</a-form-item>
                        <a-form-item label="工件名称">{{ nowTask.productName || '暂无数据' }}</a-form-item>
                        <a-form-item label="任务开始时间">
                          {{ nowTask.startTime ? nowTask.startTime.substring(0, 10) : '暂无数据' }}
                        </a-form-item>
                        <a-form-item label="任务结束时间">
                          {{ nowTask.endTime ? nowTask.endTime.substring(0, 10) : '暂无数据' }}
                        </a-form-item>
                      </a-col>
                    </a-form>
                  </a-row>
                </div>
              </div>
            </a-col>
          </a-row>
          <!-- 生产计划区域 -->
          <production-plan ref="production" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import pieCharts from './component/pieCharts';
import productionPlan from './component/productionPlan.vue';
import api from '@/api/equipment';

export default {
  name: 'index',
  components: {
    pieCharts,
    productionPlan,
  },
  data() {
    return {
      dateType: -1,
      taskList: [],
      taskLIiIndex: 0,
      pieData: [
        { value: '0', name: '产出' },
        { value: '0', name: '废件' },
      ],
      Params: {
        status: -1,
      },
      AllTaskTotal: 0,
      nowTask: {},
      taskId: null,
      pieDataPercent: '0',
      AllPickParams: {
        pageSize: 5,
        pageNum: 1,
      },
      AllPickData: [],
      AllPickTotal: 0,
      AllWasterParams: {
        pageSize: 3,
        pageNum: 1,
      },
      AllWasterData: [],
      AllWasterTotal: 0,
      TaskProduceData: [],
    };
  },
  created() {
    let roleId = localStorage.getItem('roleId');
    if (roleId == 1) {
      this.Params.companyId = Number(localStorage.getItem('compid'));
    } else {
      this.Params.companyId = Number(localStorage.getItem('choseCompanyId'));
    }
    this.getAllTask();
  },
  methods: {
    // 获取生产计划列表数据
    choseTask(index) {
      this.taskLIiIndex = index;
      this.taskId = this.taskList[index].taskId;
      this.inDetail();
    },
    // 结束任务
    finishTask(item, index) {
      let params = {
        taskId: item.taskId,
      };
      api.finishTask(params).then((res) => {
        if (res.msgCode === 0) {
          this.$message.info(res.msgDesc);
          this.getAllTask(index);
        } else {
          this.$message.error(res.msgDesc);
        }
      });
    },
    getAllTask(index) {
      api.getAllTask(this.Params).then((res) => {
        if (res.msgCode === 0) {
          this.taskList = res.data.rows;
          this.AllTaskTotal = res.data.total;
          if (res.data.total <= 0) {
            this.emptyData();
            return;
          }
          if (index) {
            this.taskId = this.taskList[index].taskId;
          } else {
            this.taskId = this.taskList[0].taskId;
          }
          this.inDetail();
        }
      });
    },
    emptyData() {
      this.nowTask = {};
      this.pieDataPercent = '0';
      this.pieData = [
        { value: 0, name: '产出' },
        { value: 0, name: '废件' },
      ];
      this.TaskProduceData = [];
      this.AllPickData = [];
      this.AllWasterData = [];
      this.AllPickTotal = 0;
      this.AllWasterTotal = 0;
    },
    inDetail() {
      this.getTask();
      this.getAllPick();
      this.getAllWaster();
      this.getTaskProduce();
    },
    //任务详情
    getTask() {
      api.getTask({ taskId: this.taskId }).then((res) => {
        this.$refs.production.list = res.data.workingProcedureVoList;
        this.nowTask = res.data;
        this.pieDataPercent = (
          ((this.nowTask.produceCount - this.nowTask.wasterCount) / this.nowTask.pickCount) *
          100
        ).toFixed(2);
        this.pieDataPercent =
          this.pieDataPercent === 'Infinity' || this.pieDataPercent === NaN ? 0 : this.pieDataPercent;
        let percent = isNaN(this.pieDataPercent) ? 0 : this.pieDataPercent;
        this.pieData = [
          { value: percent, name: '产出' },
          { value: percent ? (100 - this.pieDataPercent).toFixed(2) : 0, name: '废件' },
        ];
      });
    },
    //领料
    getAllPick() {
      this.AllPickParams.taskId = this.taskId;
      api.getAllPick(this.AllPickParams).then((res) => {
        this.AllPickData = res.data.rows;
        this.AllPickTotal = res.data.total;
      });
    },
    //废料
    getAllWaster() {
      this.AllWasterParams.taskId = this.taskId;
      api.getAllWaster(this.AllWasterParams).then((res) => {
        this.AllWasterData = res.data.rows;
        this.AllWasterTotal = res.data.total;
      });
    },
    getTaskProduce() {
      api.getTaskProduce({ taskId: this.taskId }).then((res) => {
        this.TaskProduceData = res.data;
      });
    },
    changepageAllPic(page, size) {
      this.AllPickParams.pageNum = page;
      this.getAllPick();
    },
    changepage(page, size) {
      this.AllWasterParams.pageNum = page;
      this.getAllWaster();
    },
    formatPercent(percent, num) {
      return num + '件';
    },
    changedate(i) {
      this.Params.status = this.dateType = i;
      this.getAllTask();
    },
  },
};
</script>

<style scoped lang="less">
@import 'index';
</style>
